import React, { useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import axios from '../../api/index'
import { NavBar,InfiniteScroll } from 'antd-mobile'
function Index() {
  const nav=useNavigate()
  const {state}=useLocation()
  const {start,end}=state 
  const [list,setList]=useState([])
  const [page,setPage]=useState(1)
  const [hasMore, setHasMore] = useState(true)
  const getdata=async()=>{
    const res=await axios.get('/api/trip/airplane',{params:{start,end,page}})
    console.log(res)
    setList([...list,...res.data.data])
    setPage(page+1)
    if(res.data.data.length===0){
      setHasMore(false)
    }
  }
  useEffect(()=>{
    getdata()
  },[])
  const godetail=(v)=>{
    console.log(v)
    nav('/detail',{state:v})
  }
  return (
    <div>
      <NavBar onBack={()=>nav(-1)}>列表页面</NavBar>
      <div>
        {
          list?.map((v,i)=>{
            return <div key={i} className='kkk' onClick={()=>godetail(v)}>
                    <span>{v.aasn}</span>
                    <span>{v.dasn}</span>
                    <span>{v.ast}</span>
                    <span>{v.dst}</span>
                    <span>{v.at}</span>
                    <span>{v.dt}</span>
                    <span>{v.sd}</span>
                    <span>￥{v.timespanNumber}</span>
            </div>
          })
        }
      </div>
      <InfiniteScroll loadMore={getdata} hasMore={hasMore} />
    </div>
  )
}

export default Index